<template>
  <div>
    <h1>Home组件</h1>
    <div>
      <button @click="$router.back(1)">后退1</button>
      <button @click="$router.forward(1)">前进1</button>
      <button @click="$router.go(-2)">后退2</button>
    </div>
    <div>
      <button @click="toGame">游戏</button>
      <button @click="toMusic">音乐</button>
      <button @click="toPlay">娱乐</button>
    </div>
    <div>
      <!-- VueRouter提供了一个router-link组件,供我们做声明式路由导航
           声明式导航 底层本质上是使用的router.push方法
           router-link接受一个属性to 代表导航的地址,to的写法其实就是router.push的location参数
       -->
      <router-link to="/home/game">游戏</router-link>
      <router-link :to="{ path: '/home/music' }">音乐</router-link>
      <router-link :to="{ name: 'play' }">娱乐</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    toGame() {
      this.$router.push("/home/game");
    },
    toMusic() {
      this.$router.push({
        path: "/home/music",
      });
    },
    toPlay() {
      this.$router.push({
        name: "play",
      });
    },
  },
};
</script>

<style>
</style>